<template>
  <div>
    <!-- data表格的数据 -->
    <!--default-expand-all 默认展开所有子菜单 -->
    <div class="bigBox">
      <el-table
        class="smBox"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
      >
        <!-- prop:数据的字段名 -->
        <!-- label:标签名 -->
        <!-- sortable:是否可以排序 -->
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="catename" label="分类名称"> </el-table-column>

        <el-table-column label="分类图片">
          <template slot-scope="scope">
                <img v-if="scope.row.img" :src="$host+scope.row.img" alt="">
          </template>
      
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCatelistTree,cateDel } from "../../request";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    // 通过bus的$on的方法开启监听
    this.$bus.$on("update", () => {
      this.getList();
    });
      // 获取总条数
    this.getList();

  },

  methods: {
    async getList() {
      let res = await getCatelistTree();
      this.tableData=res.list

    },
    // 获取商品分类列表
    getCateList() {
      this.$http("/catelist")
        .then((res) => {
          //   console.log(res);
          // 根据接口数据，赋值
          this.tableData = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑角色
    edit(info) {
      console.log(info);
      this.$emit("edit", { ...info });
    },
    // 删除菜单弹窗
    del(id) {
      // 弹窗，二次确认
      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 点击确认按钮
        .then(() => {
          // 真的要删了
          this.delCate(id);
        })
        // 点击取消按钮
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 真的要删了
    async delCate(id) {
      let res = await cateDel(id);
      //再次调用获取数据  刷新页面
      this.getCateList()
      // location.reload();  强制自动刷新
    },
  },
};
</script>

<style>
.bigBox {
  overflow: hidden;
  margin-top: 18px;
  width: auto;
  height: auto;
  background-color: #fff;
}
.bigBox .smBox {
  margin: 8px 18px 19px 18px;
}
</style>